<template>
    <div class="register">
        <div class="header">
            <div class="title">注册</div>
            <div class="sub-title">创建您的账号</div>
        </div>
        <van-form @submit="onSubmit" class="form">
            <van-cell-group inset>
                <van-field v-model="formData.username" name="username" label="用户名" placeholder="请输入用户名"
                    :rules="[{ required: true, message: '请输入用户名' }]" />
                <van-field v-model="formData.password" type="password" name="password" label="密码" placeholder="请输入密码"
                    :rules="[{ required: true, message: '请输入密码' }]" />
                <van-field v-model="confirmPassword" type="password" name="confirmPassword" label="确认密码"
                    placeholder="请再次输入密码" :rules="[
                        { required: true, message: '请再次输入密码' },
                        { validator: validatePassword, message: '两次密码输入不一致' }
                    ]" />
                <van-field v-model="formData.nickname" name="nickname" label="昵称" placeholder="请输入昵称" />
                <van-field v-model="formData.phone" name="phone" label="手机号" placeholder="请输入手机号"
                    :rules="[{ pattern: /^1[3-9]\d{9}$/, message: '手机号格式不正确' }]" />
                <van-field v-model="formData.email" name="email" label="邮箱" placeholder="请输入邮箱"
                    :rules="[{ pattern: /.+@.+\..+/, message: '邮箱格式不正确' }]" />
            </van-cell-group>

            <div style="margin: 16px;">
                <van-button round block type="primary" native-type="submit" :loading="loading">
                    注册
                </van-button>
            </div>
            <div class="links">
                <router-link to="/login">已有账号？去登录</router-link>
            </div>
        </van-form>
    </div>
</template>

<script setup>
import { ref, reactive } from 'vue'
import { showToast } from 'vant'
import { useRouter } from 'vue-router'
import useUserStore from '@/stores/modules/user'

// 表单数据
const formData = reactive({
    username: '',
    password: '',
    nickname: '',
    phone: '',
    email: '',
})

const confirmPassword = ref('')
const loading = ref(false)
const router = useRouter()
const userStore = useUserStore()

// 验证两次密码是否一致
const validatePassword = () => {
    return formData.password === confirmPassword.value
}

// 提交表单
const onSubmit = async () => {
    if (formData.password !== confirmPassword.value) {
        showToast({
            type: 'fail',
            message: '两次密码输入不一致',
        })
        return
    }

    try {
        loading.value = true
        // 调用注册接口
        const result = await userStore.register(formData)

        if (result.success) {
            showToast({
                type: 'success',
                message: '注册成功，请登录',
            })
            router.push('/login')
        } else {
            showToast({
                type: 'fail',
                message: result.message || '注册失败，请重试',
            })
        }
    } catch (error) {
        console.error('注册错误:', error)
        showToast({
            type: 'fail',
            message: '注册失败，请重试',
        })
    } finally {
        loading.value = false
    }
}
</script>

<style lang="less" scoped>
.register {
    padding: 20px;
    height: 100vh;
    box-sizing: border-box;
    background: linear-gradient(to bottom, #ff9854 0%, #ff9854 30%, #ffffff 100%);
    overflow-y: auto;

    .header {
        margin: 20px 0;

        .title {
            font-size: 28px;
            font-weight: bold;
            margin-bottom: 10px;
            color: #fff;
        }

        .sub-title {
            font-size: 16px;
            color: rgba(255, 255, 255, 0.8);
        }
    }

    .form {
        margin-top: 20px;
    }

    .links {
        margin-top: 16px;
        text-align: center;

        a {
            color: #fff;
            text-decoration: none;
            font-weight: 500;
        }
    }
}
</style>